<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted, ref } from 'vue'

import { imagePath, maskStyle } from '@/libs/file-utils'
import { groupList, groupMap,curGroupIdx, friends, curFriendIdx, searchKey } from './data'
import { init, selectGroup, removeFriend, search, editFriend, editSelf, checkFriend, clear } from './data'
import { userInfo } from '@/libs/user'

const img_bg = imagePath('community/friend/list/bg.jpg')
const img_box = imagePath('community/friend/list/box.png')
const img_logo = imagePath('community/friend/list/logo.png')
const icon_add = imagePath('community/friend/list/icon-add.svg')
const icon_delete = imagePath('icon-delete.svg')
const icon_arrow = imagePath('community/friend/list/icon-arrow.svg')
const icon_search = imagePath('community/friend/list/icon-search.svg')
const icon_go = imagePath('community/friend/list/icon-go.svg')
const icon_edit = imagePath('community/friend/list/icon-edit.svg')
const icon_logo = imagePath('quiz/result/list/icon-logo.png')

const showTypeList = ref(false)

onMounted(init)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="community-friend-list"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="box"
      :style="{ backgroundImage: img_box }"
      @click="showTypeList = false"
    >
      <div class="top">
        <div
          class="logo"
          :style="{ backgroundImage: img_logo }"
        ></div>
        <div class="title">档案</div>
        <div class="btns">
          <div
            class="btn"
            @click="editFriend()"
          >
            <div
              class="icon"
              :style="{
                padding: '0 4rpx',
                backgroundImage: icon_add
              }"
            ></div>
          </div>
          <div
            class="btn"
            @click="removeFriend"
          >
            <div
              class="icon delete"
              :style="maskStyle(icon_delete)"
            ></div>
            删除
          </div>
        </div>
        <div class="search-bar">
          <div
            v-if="groupList.length"
            class="btn all"
            @click.stop="showTypeList = !showTypeList"
          >
            {{ groupList[curGroupIdx].groupName }}
            <div
              class="icon"
              :style="{ backgroundImage: icon_arrow }"
            ></div>

            <div
              v-if="showTypeList"
              class="list"
            >
              <div
                v-for="(item, idx) in groupList"
                :key="idx"
                class="item"
                @click="selectGroup(idx)"
              >{{ item.groupName }}</div>
            </div>
          </div>
          <div class="btn search">
            <div
              class="icon"
              :style="{ backgroundImage: icon_search }"
            ></div>
            <input
              class="input"
              placeholder="输入搜索内容"
              placeholder-style="color: #AA82BB"
              v-model="searchKey"
              @confirm="search"
              @keydown.enter="search"
            />
          </div>
          <div class="btn go">
            <div
              class="icon"
              :style="{ backgroundImage: icon_go }"
              @click="search"
            ></div>
          </div>
        </div>
      </div>

      <!-- 好友列表 -->
      <div class="content">
        <template v-if="userInfo">
          <div class="item">
            <div class="name">{{ userInfo.nickname }}</div>
            <div class="tag self">自己</div>
            <div class="info">{{ userInfo.gender === 1 ? '♂' : '♀' }} {{ userInfo.birthday }}</div>
            <div
              class="btn edit"
              @click.stop="editSelf()"
            >
              编辑
              <div
                class="icon"
                :style="{ backgroundImage: icon_edit }"
              ></div>
            </div>
          </div>
          <div class="divider"></div>
        </template>

        <div
          v-if="friends.length"
          v-for="(item, idx) in friends"
          :key="idx"
          class="item"
          @click="curFriendIdx = curFriendIdx === idx ? -1 : idx"
        >
          <div
            class="status"
            :class="{ active: curFriendIdx === idx }"
          >
            <div class="circle"></div>
            <div
              class="inner"
              :style="{ backgroundImage: icon_logo }"
            ></div>
          </div>

          <div class="name">{{ item.nickname }}</div>
            <div class="tag" :class="'group'+item.groupId">{{groupMap[item.groupId]}}</div>
          <div class="info">{{ item.gender === 1 ? '♂' : '♀' }} {{ item.birthday }} <span v-if="item.city">{{ item.province }},{{ item.city }},{{ item.district }}</span></div>
          <div
            class="btn edit"
            @click.stop="editFriend(item)"
          >
            编辑
            <div
              class="icon"
              :style="{ backgroundImage: icon_edit }"
            ></div>
          </div>
        </div>
        <div
          v-else
          class="empty"
        >空空如也，点击上方“+”添加好友吧~</div>
      </div>

      <div class="bottom">
        <div
          class="btn confirm"
          @click="checkFriend(12)"
        >星座+MBTI合盘</div>
        <div
          class="btn confirm"
          @click="checkFriend(11)"
        >八字合盘</div>
      </div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.box {
  position: relative;
  width: 688rpx;
  height: calc(100% - 50rpx);

  margin: 25rpx auto;

  display: flex;
  flex-direction: column;

  border-radius: 24rpx;

  overflow: hidden;

  box-shadow: 0 4rpx 16rpx 0 rgba(#C53EFF, .44);

  .top {
    position: relative;
    width: 100%;
    height: 304rpx;

    background-color: rgba(#ce7af5, .3);
    box-shadow: 0 2rpx 10rpx 0 rgba(194, 90, 255, .65);

    z-index: 1;

    .logo {
      position: absolute;
      top: -2rpx;
      left: 20rpx;

      width: 216rpx;
      height: 216rpx;
    }

    .title {
      position: absolute;
      top: 28rpx;
      left: 262rpx;

      color: #513B73;
      font-size: 80rpx;
      line-height: 98rpx;
      text-shadow: 0 0 6rpx #fff, 0 0 6rpx #fff, 0 0 6rpx #fff, 0 0 6rpx #fff;
    }

    .btns {
      position: absolute;
      top: 142rpx;
      right: 20rpx;

      display: flex;

      .btn {
        margin-left: 20rpx;
      }
    }

    .search-bar {
      position: absolute;
      top: 224rpx;
      left: 0;

      width: 100%;

      box-sizing: border-box;
      padding: 0 20rpx;

      display: flex;

      .all {
        position: relative;

        .icon {
          margin-left: 8rpx;
        }

        .list {
          position: absolute;
          top: 100%;
          left: 0;

          max-height: 50vh;

          box-sizing: border-box;
          padding: 0 18rpx;

          background-color: #fff;
          border-radius: 16rpx;
          box-shadow: 0 24rpx 64rpx 0 rgba(#000, .24);

          overflow-y: auto;
          touch-action: pan-y;

          .item {
            min-width: 158rpx;

            padding: 21rpx 0;

            color: #171A1D;
            font-size: 34rpx;
            line-height: 34rpx;
            white-space: pre;

            &:not(:last-child) {
              border-bottom: 2rpx solid rgba(126, 134, 142, .16);
              ;
            }
          }
        }
      }

      .search {
        flex: 1;

        margin: 0 16rpx;

        .icon {
          margin-right: 8rpx;
        }

        .input {
          color: #513B73;
          font-size: 32rpx;
        }
      }

      .go {
        width: 64rpx;
        height: 64rpx;

        box-sizing: border-box;
        padding: 10rpx;
        border-radius: 32rpx;

        .icon {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }

  .content {
    flex: 1;

    box-sizing: border-box;
    padding-top: 16rpx;
    padding-bottom: 32rpx;

    overflow-y: auto;
    touch-action: pan-y;

    .item {
      position: relative;
      width: 620rpx;
      height: 204rpx;

      margin: 16rpx auto 0;

      border-radius: 32rpx;
      background-color: #FFF6FF;
      box-shadow: 0 4rpx 8rpx 0 rgba(116, 61, 167, .46);

      .status {
        position: absolute;
        top: 50%;
        left: 28rpx;
        transform: translateY(-50%);

        width: 56rpx;
        height: 56rpx;

        .circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 32rpx;
          height: 32rpx;

          box-sizing: border-box;
          border: 2rpx solid #8B41FF;
          border-radius: 50%;

          transform: translate(-50%, -50%)scale(1);
          transition: transform .3s;
        }

        .inner {
          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 100%;

          transform: scale(0);
          transition: transform .3s;
        }

        &.active {
          .circle {
            transform: translate(-50%, -50%)scale(0);
          }

          .inner {
            transform: scale(1);
          }
        }
      }

      .name {
        position: absolute;
        top: 36rpx;
        left: 96rpx;

        width: 348rpx;

        color: #513B73;
        font-size: 40rpx;
        line-height: 48rpx;
      }

      .tag {
        position: absolute;
        top: 92rpx;
        left: 96rpx;

        height: 36rpx;

        padding: 0 12rpx;

        font-size: 24rpx;
        line-height: 36rpx;

        border-radius: 6rpx;

        &.self{
          color: #fff;
          background-color: rgba(#070707,.19);
        }

        // 好友
        &.group1{
          color: #006FFF;
          background-color: rgba(#006FFF,.19);
        }

        // 亲戚
        &.group2{
          color: #FF9D00;
          background-color: rgba(#FF9D00,.19);
        }

        // 恋人
        &.group3{
          color: #FF49E1;
          background-color: rgba(#FF49E1,.19);
        }

        // 明星
        &.group4{
          color: #C62AFF;
          background-color: rgba(#C831FF,.19);
        }
      }

      .info {
        position: absolute;
        top: 136rpx;
        left: 96rpx;

        width: 348rpx;

        color: #513B73;
        font-size: 24rpx;
        line-height: 32rpx;
      }

      .edit {
        position: absolute;
        top: 50%;
        right: 32rpx;
        transform: translateY(-50%);

        color: #fff;
        background-color: #CB86FF;

        .icon {
          margin-left: 8rpx;
        }
      }
    }

    .divider {
      width: 92%;
      height: 2rpx;

      margin: 20rpx auto 0;

      background-color: rgba(#513B73, .5);
    }

    .empty {
      margin: 50rpx;

      color: #444;
      text-align: center;
    }
  }

  .bottom {
    width: 100%;
    height: 166rpx;

    background-color: rgba(#ce7af5, .3);
    box-shadow: 0 -2rpx 10rpx 0 rgba(194, 90, 255, .65);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1;

    // .add {
    //   width: 286rpx;
    //   height: 68rpx;

    //   padding: 0;

    //   margin-right: 30rpx;

    //   color: #fff;
    //   background-color: #FF8DB2;

    //   border-radius: 34rpx;

    //   display: flex;
    //   justify-content: center;

    //   .icon {
    //     margin-right: 18rpx;

    //     background-color: #fff;
    //     mask-size: 100% 100%;
    //   }
    // }

    .confirm {
      width: 286rpx;
      height: 68rpx;

      margin: 0 20rpx;

      padding: 0;

      color: #fff;
      background-color: #AB46FF;

      border-radius: 34rpx;

      display: flex;
      justify-content: center;
    }
  }

  .btn {
    height: 64rpx;

    padding: 0 14rpx;

    display: flex;
    align-items: center;

    color: #513B73;
    font-size: 28rpx;

    border-radius: 24rpx;
    background-color: #FCC8FD;
    box-shadow: 0 4rpx 10rpx 0 rgba(222, 131, 255, .58), 0 2rpx 4rpx 0 rgba(255, 255, 255, .57) inset, 0 0 8rpx 0 rgba(233, 196, 255, .51) inset;

    .icon {
      width: 32rpx;
      height: 32rpx;

      &.delete {
        margin-right: 8rpx;

        background-color: #513B73;
        mask-size: 100% 100%;
      }
    }
  }
}
</style>